<template>
    <el-icon><Plus  @click="addUser()"/></el-icon>
    <el-table :data="filterTableData" style="width: 100%">
        <el-table-column label="ID" prop="id" />
        <el-table-column label="Name" prop="username" />
        <el-table-column label="password" prop="password" />

        <el-table-column label="right" prop="type" />
        <el-table-column align="right">
            <template #header>
                <el-input v-model="search" size="small" placeholder="Type to search" />
            </template>
            <template #default="scope">
                <el-button size="small" @click="handleEdit( scope.row)">Edit</el-button>
                <el-button size="small" type="danger" @click="handleDelete(scope.row.id)">Delete</el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-button text @click="dialogTableVisible = true">
        open a Table nested Dialog
      </el-button>

      <el-dialog v-model="dialogTableVisible" title="Shipping address">
        <el-table :data="gridData">
          <el-table-column property="date" label="Date" width="150" />
          <el-table-column property="name" label="Name" width="200" />
          <el-table-column property="address" label="Address" />
        </el-table>
      </el-dialog>

      <!-- Form -->


      <el-dialog v-model="dialogFormVisible" title="Shipping address">
        <el-form :model="form">
          <el-form-item label="Promotion name" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off" />
          </el-form-item>
          <el-form-item label="Zones" :label-width="formLabelWidth">
            <el-select v-model="form.region" placeholder="Please select a zone">
              <el-option label="Zone No.1" value="shanghai" />
              <el-option label="Zone No.2" value="beijing" />
            </el-select>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogFormVisible = false">Cancel</el-button>
            <el-button type="primary" @click="dialogFormVisible = false">
              Confirm
            </el-button>
          </span>
        </template>
      </el-dialog>

</template>

<script lang="ts" setup>
import { ElMessage, ElMessageBox } from 'element-plus'
//按需倒数
import { ref, reactive, computed , onMounted } from 'vue'
import axios from 'axios'
const search = ref();//定义简单类型变量

const dialogFormVisible = ref(false)
//reactive定义复杂类型的数据
const userlist = reactive([])

//定义方法
const handleEdit = (row) => {
  console.log( row)
}

const addUser = () => { 


    console.log("添加用户")
    dialogFormVisible.value=true
}

const handleDelete = (id) => {
    console.log(id)
    ElMessageBox.confirm(
        '你确定删除吗?',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            axios.get("/user/deleteUser", {data:id}).then(
                res => { 
                    if (res.data.code == 200) { 
                          ElMessage({
                            type: 'success',
                            message: '删除完成',
                          })
                        getUserlist()
                    }
                }
            )
          
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '删除取消',
            })
        })
}

//组合式api 没有this  访问变量时 变量名.value(简单数据类型)   变量名.data(复杂数据类型)
const filterTableData = computed(() => {

    //变量的访问方式 没有了this 而采用了 ref定义的用了value
      if (search.value) {
    //变量的访问方式 没有了this 而采用了 reactive定义的用了data
        return userlist.data.filter((a)=>a.username.includes(search.value))
      } else {
       return userlist.data;
      }

}
    )

onMounted(() => {
    getUserlist()
})


const getUserlist = () => { 
    axios.get('/user/getUserList').then(res => {
        if (res.data.code == 200) {
            userlist.data = res.data.result


        }
    })

}
// onMounted(){ 

// }

// export default {

// computed()
// {

// }

    //methods{ }
// data(){
//     return {
//seartf: ""
    
//}
// }
// }




</script>
